<template>
  <div class="footer_bar" id="footer_bar" v-if="isfooterShow">
    <nav class="mui-bar mui-bar-tab">
        <router-link to='/main/home'  class="mui-tab-item">
          <span class="mui-icon mui-icon-home"></span>
          <span class="mui-tab-label">首页</span>
        </router-link>
        <router-link to='/main/search'  class="mui-tab-item">
      	<span class="mui-icon mui-icon-email">
				</span>
          <span class="mui-tab-label">会员</span>
        </router-link>
        <router-link to='/main/order' class="mui-tab-item">
     	<span class="mui-icon mui-icon-contact">
					<span class="mui-badge" id="mui_badge">0</span>
				</span>
          <span class="mui-tab-label">购物车</span>
        </router-link>
        <router-link to='/main/mine' class="mui-tab-item">
          <span class="mui-icon mui-icon-gear"></span>
          <span class="mui-tab-label">搜索</span>
        </router-link>
    </nav>
  </div>
</template>

<script>
  import {vm,COUNTSTR} from '../kits/vm.js'
  //利用vm.$on这个事件
  vm.$on(COUNTSTR,function (count){
    console.log(count);
//    将count值追加到购物车上面
      let barNum = document.getElementById('mui_badge');
//      console.log(barNum);
//    追加
        barNum.innerHTML = parseInt(barNum.innerText) + count;
  })
  export default {
    data () {
      return {
        isfooterShow:true
      }
    },
//    监听路由
    watch:{
        '$route':function(newrou,oldrou){
            let newpath = newrou.path;
            console.log(newpath);
            if(newpath.indexOf('main')>0 ||newpath.indexOf('goodinfo')>0 ){
              this.isfooterShow = true;
            }else{
              this.isfooterShow = false;
            }
        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="css">
  @import "../../static/css/iconfont.css";

  /*激活样式
  1,.router-link-active {
    color:#ff7555;
  }
  2，mui-active,直接将router-link-active替换成mui-active
  */
  ul {
    list-style-type: none;
    padding: 0;
  }
  .footer_bar{
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-top: .5rem;
    height:.5rem;
    border-top:1px solid #c1c1c1;
    background-color: white;
  }
  .footer_bar ul{
    display: flex;
    height:100%;
    font-size: .14rem;
  }
  .footer_bar ul li{
    flex:1;
    justify-content: space-between;
    align-items: center;
    color:#256883;
  }
  .footer_bar ul li a{
    margin-top: .02rem;
  }
  .footer_bar ul li i{
    width: 100%;
    font-size: .24rem;
  }
  .footer_bar ul li span{
    width: 100%;
    margin-top: .01rem;
    display: block;
    font-size: .14rem;
  }
 .mui-active{
   color:#ff7555;
 }
</style>

